<template>
  <div
    class="data-detail-list custom-el-plus"
    v-loading="props.loading"
    element-loading-background="rgba(0,0,0,0.5)">
    <div class="data-table-wrapper">
      <el-table
        :data="detailListTableData"
        style="width: 100%; height: 100%">
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod"
          width="80"></el-table-column>
        <el-table-column
          label="事件"
          prop="alarmName"
          width=""></el-table-column>
        <el-table-column
          label="位置"
          prop="crossName"
          show-overflow-tooltip
          width=""></el-table-column>
        <el-table-column
          label="预警时间"
          prop="alarmTime"
          width=""></el-table-column>
        <el-table-column
          label="报警来源"
          prop="deviceType"
          width=""></el-table-column>
        <el-table-column
          label="设备ID"
          prop="deviceId"
          width=""></el-table-column>
        <el-table-column
          label="操作"
          prop=""
          width="">
          <template #default="{ row, $index }">
            <div class="btn-box">
              <span @click="viewImg(row)">查看图片</span>
              <span @click="viewVideo(row)">查看视频</span>
            </div>
          </template></el-table-column
        >
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="pageInfo.pageNum"
        v-model:page-size="pageInfo.pageSize"
        :background="true"
        :page-sizes="[15, 50, 100]"
        popper-class="custom-query-select"
        layout="total, prev, pager, next, sizes"
        v-model:total="pageInfoTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
  <el-dialog
    v-model="picDialogVisible"
    width="auto"
    destroy-on-close
    align-center
    title="图片">
    <div class="pic-dialog">
      <div class="img-content">
        <img
          :src="currentPic"
          alt="" />
      </div>
    </div>
  </el-dialog>
  <el-dialog
    v-model="videoDialogVisible"
    width="auto"
    destroy-on-close
    align-center
    @close="closeVideo"
    title="视频">
    <div class="pic-dialog">
      <div class="img-content">
        <div
          class="video"
          id="video-player"></div>
        <!-- <video
          :src="currentVideo"
          controls
          width="100%"
          height="100%"></video> -->
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
  import { computed, getCurrentInstance, onMounted, reactive, ref, nextTick } from 'vue'

  import Player from 'xgplayer'
  import FlvPlugin from 'xgplayer-flv'

  /* =============数据============== */
  const { proxy } = getCurrentInstance()
  const props = defineProps({
    detailListData: {
      type: Object,
      default: {}
    },
    loading: {
      type: Boolean,
      default: false
    }
  })
  const emit = defineEmits(['changePageSize', 'changePageNum'])

  const pageInfo = reactive({
    pageNum: 1,
    pageSize: 15
  })
  const pageInfoTotal = computed(() => {
    return props.detailListData.total || 0
  })
  const detailListTableData = computed(() => {
    return props.detailListData.list || []
  })
  const picDialogVisible = ref(false)
  const videoDialogVisible = ref(false)
  const currentPic = ref('')
  const currentVideo = ref('')
  const videoPlayer = ref(null)
  /* =============方法============== */
  const indexMethod = index => {
    return index + 1 + (pageInfo.pageNum - 1) * pageInfo.pageSize
  }
  const handleSizeChange = val => {
    pageInfo.pageSize = val
    pageInfo.pageNum = 1
    emit('changePageSize', val)
  }
  const handleCurrentChange = val => {
    pageInfo.pageNum = val
    emit('changePageNum', pageInfo.pageNum)
  }
  const viewImg = row => {
    currentPic.value = row.imgUrl
    picDialogVisible.value = true
  }
  const getVideoUrlByDeviceId = async deviceId => {
    try {
      const res = await proxy.$http.getWithUrl('overview/video/url', {
        deviceId: deviceId
      })
      currentVideo.value = res
    } catch (error) {
      console.log(error)
    }
  }
  const viewVideo = row => {
    getVideoUrlByDeviceId(row.deviceId)
    videoDialogVisible.value = true
    nextTick(() => {
      let div = document.getElementById('video-player')
      let width = parseInt(div.style.width)
      let height = parseInt(div.style.height)
      if (FlvPlugin.isSupported()) {
        videoPlayer.value = new Player({
          id: 'video-player',
          autoplay: true,
          autoplayMuted: true,
          plugins: [FlvPlugin],
          controls: true, //控制栏全部关闭
          width: width,
          height: height,
          url: currentVideo.value,
          flv: {
            retryCount: 3, // 重试 3 次，默认值
            retryDelay: 1000, // 每次重试间隔 1 秒，默认值
            loadTimeout: 10000 // 请求超时时间为 10 秒，默认值
          }
        })
      } else {
        console.log('您的浏览器不支持视频')
      }
    })
  }
  const closeVideo = () => {
    videoPlayer.value && videoPlayer.value.destroy()
    currentVideo.value = ''
  }

  onMounted(() => {})
</script>

<style scoped lang="scss">
  .data-detail-list {
    margin-top: pxTvh(50);
    background: #0d172f;
    color: #a5adba;
    @include computed_font(14);
    height: calc(100% - #{pxTvh(50)});
    display: flex;
    flex-direction: column;

    & > .data-table-wrapper {
      box-sizing: border-box;
      height: calc(100% - #{pxTvh(67)});
      padding: pxTvh(16) pxTvw(16);
      .btn-box {
        display: flex;
        span {
          cursor: pointer;
          color: #377dff;
          &:first-child {
            margin-right: pxTvh(16);
          }
        }
      }
    }
  }
  .pic-dialog {
    width: pxTvw(1200);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .img-content {
      width: pxTvw(1168);
      height: pxTvh(657);
      background-color: rgba(255, 255, 255, 0.2);
      margin-top: pxTvh(16);
    }

    .img-content img {
      @include wh100();
    }
    .img-content #video-play {
      @include wh100();
    }
  }
</style>
